<template>
  <view class="container">
    <sb-back-icon />
    <view
      class="info"
      :style="{ height: orderInfo.status >= 2 ? '100%' : '90%' }"
    >
      <u-cell-group
        class="top-cell bg-white radius16 pad20 shadow-line"
        :border="false"
      >
        <u-cell-item
          v-if="deliveryList.length"
          :border-bottom="false"
          use-label-slot
          @click="
            $go2(
              `./delivery-detail?id=${orderInfo.deliveryId}&orderStatus=${orderInfo.status}`
            )
          "
        >
          <view slot="label" class="u-line-2">
            {{ deliveryList[0].content }}
          </view>
          <view slot="title" class="title">
            <u-icon name="car-fill" class="marh10"></u-icon>
            <span>{{ orderInfo.status === 4 ? "已签收" : "运输中" }}</span>
          </view>
        </u-cell-item>
        <u-cell-item
          :border-bottom="false"
          :label="orderInfo.receiver + '     ' + orderInfo.tel"
          :arrow="false"
        >
          <view slot="title" class="title">{{
            orderInfo.region + "   " + orderInfo.address
          }}</view>
        </u-cell-item>
      </u-cell-group>
      <u-gap height="30"></u-gap>
      <view class="bg-white radius16 pad20 shadow-line">
        <view v-for="item in orderInfo.orderGoods" :key="item.id">
          <view class="order-info flex bg-white pad10">
            <u-image
              class="u-margin-right-10"
              :src="item.sku.goods.cover"
              width="150rpx"
              height="150rpx"
              border-radius="10rpx"
            />
            <view class="item-info h100 flex1 flex flex-col j-s">
              <view class="title u-line-2">
                {{ item.name || item.sku.goods.name }}
              </view>
              <view class="sku-spec font24">
                {{ item.skuDesc }}
              </view>
              <view class="w100 flex j-s">
                <view class="c-price">
                  <span
                    >￥<span class="number u-font-16">{{
                      item.sku.salePrice
                    }}</span></span
                  >
                </view>
                <view>x{{ item.count }}</view>
              </view>
            </view>
          </view>
          <u-cell-group :border="false" class="remark-cell"> </u-cell-group>
        </view>
      </view>
      <u-gap height="30"></u-gap>
      <u-cell-group
        class="info-cell bg-white radius16 pad20 shadow-line"
        :border="false"
      >
        <u-cell-item
          hover-class="none"
          :border-bottom="false"
          title="订单编号"
          :value="orderInfo.id"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          hover-class="none"
          title="下单时间"
          :arrow="false"
          :border-bottom="false"
          :value="$u.timeFrom(orderInfo.createdAt, 'yyyy-mm-dd hh:MM')"
        ></u-cell-item>
        <u-cell-item
          hover-class="none"
          title="订单状态"
          :arrow="false"
          :border-bottom="false"
          :value="['待付款', '待审核', '待发货', '待收货'][orderInfo.status]"
        ></u-cell-item>
        <u-cell-item
          hover-class="none"
          title="商品总额"
          :border-bottom="false"
          :arrow="false"
          :value="'￥' + orderInfo.presentPrice"
        ></u-cell-item>
        <u-cell-item
          hover-class="none"
          title="运费"
          :border-bottom="false"
          :arrow="false"
          value="+￥0.00"
        ></u-cell-item>
        <u-cell-item
          hover-class="none"
          title="商品优惠"
          :border-bottom="false"
          :arrow="false"
          :value="'￥' + orderInfo.reducePrice"
        ></u-cell-item>
        <u-cell-item
          title="付款凭证"
          :arrow="false"
          use-label-slot
          :border-bottom="false"
        >
          <view slot="label">
            <view v-if="orderInfo.status >= 2" class="flex">
              <u-image
                :src="item"
                v-for="(item, index) in fileNamelist"
                :key="index"
                width="108rpx"
                height="150rpx"
                border-radius="10rpx"
              />
            </view>
            <u-upload
              v-else
              :fileList="fileList"
              @on-uploaded="uploaded"
              @on-remove="delPicture"
              :header="header"
              :show-progress="false"
              multiple
              :action="action"
              :maxCount="6"
              width="180"
              height="150"
            />
          </view>
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="pad20 submit-btn w100 bg-white">
      <u-button
        v-if="orderInfo.status < 2"
        shape="square"
        type="error"
        @click="submit"
        >通知客服审核</u-button
      >
    </view>

    <u-modal
      v-model="show"
      content="您已成功上传交易凭证，请等待审核"
      @confirm="confirm"
    ></u-modal>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { TOKEN } from "@/config/constant";
import { UPLOAD_URL } from "@/config";

export default {
  data() {
    return {
      id: "",
      orderInfo: {},
      fileList: [],
      show: false,
      action: UPLOAD_URL,
      fileNamelist: [],
      orderStatus: 1,
      deliveryList: [],
      header: { token: uni.getStorageSync(TOKEN) },
    };
  },
  onLoad({ id }) {
    this.id = id;
    this.getOrderDetail();
  },
  methods: {
    async getOrderDetail() {
      let { success, data } = await this.$get("/order/detail", {
        id: this.id,
      });
      if (success) {
        this.orderInfo = data;
        this.orderInfo.orderGoods = this.orderInfo.orderGoods.map((dd) => {
          const skuDesc = dd.sku.skuSpec.map((ddd) => ddd.specValue);
          return { ...dd, skuDesc: skuDesc.join(",") };
        });
        console.log(this.orderInfo);
        this.fileList = data.proof.map((d) => {
          return { url: d.img, id: d.id };
        });
        this.fileNamelist = data.proof.map((d) => d.img);
        if (data.delivery) {
          this.deliveryList = data.delivery.records;
        }
      }
    },
    uploaded(lists, name) {
      console.log(lists);
      this.fileList = lists;
      this.fileNamelist = lists.map((l) => l.response?.data);
      console.log(this.fileNamelist);
    },
    async submit() {
      console.log(this.fileList);
      if (!this.fileNamelist.length) {
        this.$refs.uToast.show({
          title: "您还未上传支付凭证，请上传后再提交审核！",
          type: "error",
        });
      } else {
        let { success, data } = await this.$postB(
          "/order-pay-proof/commit-to-check",
          {
            img: this.fileNamelist,
            orderId: this.id,
          }
        );
        if (success) this.show = true;
      }
    },
    async confirm() {
      // let { success, data } = await this.$postB(
      //   "/order-pay-proof/commit-to-check",
      //   {
      //     id: this.id,
      //     key: "status",
      //     val: this.orderStatus,
      //   }
      // );
      // console.log(data);
      this.$go2(
        `/pages/main/order/order-detail?current=${this.orderStatus + 1}`
      );
    },
    async delPicture(index, lists) {
      console.log(index);
      console.log(lists);
      this.fileNamelist = lists.map((l) => l.response?.data);
      console.log(this.fileNamelist);
      const target = this.fileList[index];
      await this.$postB("/order-pay-proof/del", { id: target.id });
      this.fileList = this.fileList.filter((f) => f !== target);
      console.log(target);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  .info {
    height: 90%;
    overflow: auto;
  }
}
.top-cell {
  .title {
    font-weight: bold;
  }
}
.order-info {
  height: 200rpx;
  .item-info {
    .title {
      line-height: normal;
    }
    .sku-spec {
      color: #bbb;
    }
    .demo-tag-owner {
      background-color: #c33;
      color: #ffffff;
      display: flex;
      align-items: center;
      padding: 4rpx 14rpx;
      border-radius: 50rpx;
      font-size: 20rpx;
      line-height: 1;
    }

    .demo-tag-text {
      border: 1px solid #c33;
      color: #c33;
      margin-left: 10px;
      border-radius: 50rpx;
      line-height: 1;
      padding: 4rpx 14rpx;
      display: flex;
      align-items: center;
      border-radius: 50rpx;
      font-size: 20rpx;
    }
  }
}
.submit-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}
</style>
